<template>
  <div style="boxs">
    <!-- <Header :params="params"/> -->
    <van-search v-model="value" shape="round" background="#fff" @input="valChange" placeholder="请输入课次" />
    <ul>
      <li @click="pushDetail(data)" v-for="(data,index) in list" :key="index">
        <img v-lazy="data.courseImg" alt="">
        <div class="right">
          <h2>{{data.courseName}}</h2>
          <p><span v-for="(data,index) in data.classParts" :key="index">{{index+1}}.{{data.partName}}</span></p>
        </div>
        <div class="process">
          <p>完成度</p>
          <p>{{getProgress(data)}}%</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
// import Header from '@/components/Header.vue'
export default {
  components: {
    // Header
  },
  created() {
    this.id = this.$router.history.current.query.id;
    this.queryLesson();
  },
  computed: {
    getProgress() {
      return (data) => {
        return Math.ceil(
          ((data.textProgress * 1 + data.videoProgress * 1) / 2)
        );
      };
    },
  },
  data() {
    return {
      params: {
        left: true,
        title: "课程列表",
      },
      list: [],
      value: "",
      loading:true,
      courseName: "",
      id: ""
    };
  },
  methods: {
    valChange(val) {
      this.courseName = val;
      this.queryLesson();
    },
    queryLesson() {
      (async () => {
        let { data } = await this.get("/course/queryClassAllots", {
          courseId: this.id,
          userId: localStorage.getItem("id"),
          courseName: this.courseName
        });
        this.list = data;
        // this.loading = false;
      })();
    },
    pushDetail(data) {
      (async () => {
        await this.get("/course/insertIcrobotNearLook", {
          userId: localStorage.getItem("id"),
          classId: data.courseId,
        });
      })();

      this.$router.push({
        path: "/details",
        query: {
          title: data.courseName,
          id: data.courseId,
          textTime: data.textTime,
          videoTime: data.videoTime,
          textProgress: data.textProgress,
          videoProgress: data.videoProgress,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.boxs {
  width: 100%;
}
/deep/ .van-search {
  padding: 0.1rem 0.24rem;
}
/deep/ .van-search__content {
  background-color: #f7f9fa;
  // height: 0.4rem;
}
ul {
  padding: 0 0.2rem;
  box-sizing: border-box;
  li {
    margin-bottom: 0.2rem;
    width: 100%;
    height: 2.2rem;
    background: #f7f9fa;
    border-radius: 0.15rem;
    padding: 0.22rem;
    box-sizing: border-box;
    display: flex;
    position: relative;
    img {
      width: 3rem;
      height: 1.76rem;
    }
    .right {
      margin-left: 0.25rem;
      width: 3.3rem;
      h2 {
        font-size: 0.26rem;
        font-family: PingFang SC;
        // font-weight: 500;
        color: #282828;
      }
      p {
        font-size: 0.2rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #a4a4a4;
        height: 1.32rem;
        margin-top: 0.1rem;
        overflow: hidden;
      }
    }
    .process {
      position: absolute;
      left: 0;
      top: 0;
      width: 1.2rem;
      height: 0.58rem;
      border-radius: 0.15rem 0 0.15rem 0;
      background: #2a9cff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      p {
        font-size: 0.16rem;
        color: white;
        text-align: center;
      }
    }
  }
}
</style>